<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">-->
<!--    <title>另一个页面</title>-->
<!--    <style>-->
<!--        body {-->
<!--            font-family: Arial, sans-serif;-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            height: 100vh;-->
<!--            margin: 0;-->
<!--            background-color: #e0e0e0;-->
<!--        }-->

<!--        .container {-->
<!--            text-align: center;-->
<!--        }-->

<!--        .button {-->
<!--            display: block;-->
<!--            width: 80%;-->
<!--            max-width: 300px;-->
<!--            padding: 15px 20px;-->
<!--            margin: 10px auto;-->
<!--            font-size: 18px;-->
<!--            color: #fff;-->
<!--            background-color: #28a745;-->
<!--            border: none;-->
<!--            border-radius: 5px;-->
<!--            cursor: pointer;-->
<!--            text-decoration: none;-->
<!--        }-->

<!--        .button:hover {-->
<!--            background-color: #218838;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="container">-->
<!--    <a href="hsz.html" class="button">婚纱照</a>-->
<!--    <a href="lyz.html" class="button">旅游照</a>-->
<!--</div>-->
<!--</body>-->
<!--</html>-->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>另一个页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #e0e0e0;
        }

        .container {
            text-align: center;
        }

        .button {
            display: block;
            width: 80%;
            max-width: 300px;
            padding: 15px 20px;
            margin: 10px auto;
            font-size: 18px;
            color: #fff;
            background-color: #28a745;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            white-space: nowrap;  /* 防止文字换行 */
        }

        .button:hover {
            background-color: #218838;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.9);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            max-width: 80%;
            max-height: 80%;
        }

        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <a href="hsz.html" class="button">婚纱照</a>
    <a href="lyz.html" class="button">旅游照</a>
    <a href="#" class="button" id="playVideoBtn1">婚纱视频</a>
    <a href="#" class="button" id="playVideoBtn2">婚礼视频</a>
</div>

<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <div class="modal-content">
        <video id="videoPlayer" width="100%" controls>
            <source id="videoSource" src="" type="video/mp4">
            您的浏览器不支持 HTML5 视频标签。
        </video>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const modal = document.getElementById('myModal');
        const videoPlayer = document.getElementById('videoPlayer');
        const videoSource = document.getElementById('videoSource');
        const playVideoBtn1 = document.getElementById('playVideoBtn1');
        const playVideoBtn2 = document.getElementById('playVideoBtn2');
        const span = document.getElementsByClassName('close')[0];

        playVideoBtn1.onclick = function(event) {
            event.preventDefault();  // 阻止默认的链接跳转行为
            modal.style.display = 'flex';
            videoSource.src = 'https://www.ncxdd.com/love';  // 设置视频源为 video1.mp4
            videoPlayer.load();  // 重新加载视频
            videoPlayer.play();
        };

        playVideoBtn2.onclick = function(event) {
            event.preventDefault();  // 阻止默认的链接跳转行为
            modal.style.display = 'flex';
            videoSource.src = 'https://www.ncxdd.com/love2';  // 设置视频源为 video2.mp4
            videoPlayer.load();  // 重新加载视频
            videoPlayer.play();
        };

        span.onclick = function() {
            modal.style.display = 'none';
            videoPlayer.pause();
            videoPlayer.currentTime = 0;
        };

        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
                videoPlayer.pause();
                videoPlayer.currentTime = 0;
            }
        };
    });
</script>
</body>
</html>
